<!--
 * @Author: Bennty
 * @Date: 2024-08-08 10:10:30
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-29 16:25:06
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="product-info">
                    <el-form :model="productInfo" ref="productInfoRef">
                        <el-row >
                            <el-col :span="12">
                                <el-form-item label="产品大类" prop="productCategoriesType">
                                    <el-select disabled v-model="selectedCategory" value-key="value">
                                        <el-option v-for="item in total_catagory" :key="item.value" :label="item.label" :value="item"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="产品小类" prop="productSubcategoryType" value-key="value">
                                    <el-select disabled v-model="selectedSubCategory">
                                        <el-option v-for="item in single_catagory" :key="item.value" :label="item.label" :value="item"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="30">
                            <el-col :span="12">
                                <el-form-item label="产品名称" prop="bomName">
                                    <el-input disabled v-model="productInfo.bomName" placeholder="请输入"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="单价" prop="bomPrice">
                                    <el-input disabled v-model="productInfo.bomPrice" placeholder="请输入">
                                        <template #append>元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="纸箱" prop="paperBoxType">
                                    <el-select disabled v-model="productInfo.paperBoxType" placeholder="请选择">
                                        <el-option v-for="item in cartons" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="箱规" prop="boxGauge">
                                    <el-input disabled v-model.number="productInfo.boxGauge">
                                        <template #append>/箱</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3" :offset="1">
                                <el-form-item label="喷码" prop="sprayCoding">
                                    <el-checkbox disabled v-model="productInfo.sprayCoding" :true-label="'1'" :false-label="'0'"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-row>
                                    <el-col :span="18">
                                        <el-form-item prop="packingMethod">
                                            <el-select disabled v-model="productInfo.packingMethod">
                                                <el-option v-for="item in package_method" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="3" :offset="2">
                                        <el-checkbox disabled v-model="isPackage" :true-value="true" :false-value="false"/>                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-form-item label="备注" prop="remark">
                            <el-input disabled v-model="productInfo.remark" type="textarea" placeholder="请输入" maxlength="128" show-word-limit></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="product-detail-info">
                    <el-form>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="现有库存">
                                    <span :style="{fontWeight:'bolder'}">{{ productInfo.currentInventory || '0箱 共计0盒' }}</span>
                                    <!-- <span :style="{marginLeft:'5px'}">共计<span :style="{fontWeight:'bolder'}">{{ productDetailInfo.boxNumber }}盒</span></span> -->
                                </el-form-item>
                                <el-form-item label="成本分析">
                                    <span>
                                        <span :style="{fontWeight:'bolder'}">{{ costPerBox }}元</span>/盒
                                    </span>
                                </el-form-item>
                                <el-form-item label="组装工费">
                                    <el-row :gutter="10">
                                        <el-col :span="12">
                                            <el-input disabled v-model.number="laborCost.price" type="number" placeholder="工费">
                                                <template #append>/盒</template>
                                            </el-input>
                                        </el-col>
                                        <el-col :span="11">
                                            <el-input disabled v-model.number="laborCost.integral" type="number" placeholder="积分"  />
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item :label="`${packagingName || '包装'}工费`" v-show="isPackage">
                                    <el-row :gutter="10" >
                                        <el-col :span="12">
                                            <el-input disabled v-model.number="packingCost.price" type="number" placeholder="工费"  >
                                                <template #append>/盒</template>
                                            </el-input>
                                        </el-col>
                                        <el-col :span="11">
                                            <el-input disabled v-model.number="packingCost.integral" type="number" placeholder="积分" />
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="效果图">
                                    <el-image style="width: 200px; height: 152px" :src="showImageUrl"></el-image>
                                </el-form-item>
                                <el-form-item label="源文件">
                                    <el-button link type="primary" v-if="sourceFile.url" @click="handleClickSourceFile(sourceFile?.url)">点击下载源文件</el-button>
                                    <span v-else>无源文件</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
        <el-card class="materials-card">
            <template #header>
                <h2>半成品：</h2>
            </template>
            <el-row class="prepared-product-list">
                <el-col :span="4" v-for="(item,index) in preparedProducts" :key="index">
                    <div class="prepared-product"  >
                        <el-image class="prepared-product-img" style="width: 178px; height: 178px; border-radius:10px" :src="item.imageUrl"></el-image>
                        <p class="product-info-text">{{item.specsDetail}}</p>
                        <p class="product-info-text">{{ `￥ ${item.number * item.price}` }}</p>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="materials-card">
            <template #header>
                <h2>辅材：</h2>
            </template>
                <el-row class="prepared-product-list">
                    <el-col :span="4" class="prepared-product"  v-for="(item,index) in auxiliaries" :key="index">
                        <el-image class="prepared-product-img" style="width: 178px; height: 178px;border-radius:10px" :src="item.imageUrl"></el-image>
                        <p class="product-info-text">{{item.specsDetail}}</p>
                        <p class="product-info-text">{{ `￥ ${item.number * item.price}` }}</p>
                        
                    </el-col>
                    
                </el-row>
                <!-- <div class="prepared-product"  v-for="(item,index) in auxiliaries" :key="item">
                    
                </div> -->
        </el-card>
        <el-image-viewer v-if="showViewer" @close="handleCloseViewer" :url-list="urlList"></el-image-viewer>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getBOMDetailApi } from '@/api/sj/warehouse/BOM'; 
import { getFormattedTimestamp } from '@/utils/dateFormat';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { total_catagory,single_catagory,cartons,package_method } = toRefs<any>(proxy?.useDict('total_catagory','single_catagory','cartons','package_method'));
const productInfoRef = ref<FormInstance>();
const router = useRouter();

const showViewer = ref(false);
const urlList = ref<string[]>([]);
    const isPackage =ref(true);

const showImageUrl = ref<string | undefined>();
const sourceFile = ref<any>({fileName:'源文件',url: undefined});
const packagingName = ref<string | undefined>();
const laborCost = ref<any>({
    price: undefined,
    integral: undefined,
    type: 1
});
const packingCost = ref<any>({
    price: undefined,
    integral: undefined,
    type: 2
});
const preparedProducts = ref<any[]>([
    {
        id:1,
        productName: '大峰A款不锈钢盒子',
        price: 0.5,
        image:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        id:2,
        productName: '大峰A款折叠生日帽',
        price: 0.5,
        image:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
]);
const auxiliaries = ref<any[]>([
    {
        id:1,
        productName: '大峰专版18cm不锈钢刀',
        price: 0.5,
        image:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        id:2,
        productName: '5g正方形甘蔗浆盘',
        price: 0.0,
        image:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
]);
const selectedCategory = ref<any>();
const selectedSubCategory = ref<any>();
const costPerBox = ref(0);

const data = reactive({
    productInfo:{
        id: undefined,
        bomName: undefined,
        bomPrice: undefined,
        paperBoxType: undefined,
        boxGauge:undefined,
        sprayCoding: undefined,
        packingMethod: undefined,
        remark: undefined,
        bomType: 1,
        renderingsUrl: undefined,
        sourceFile: undefined,
        currentInventory: undefined
    }
});
const { productInfo } = toRefs(data);

const getBOMDetail = async () => {
    const bomId = router.currentRoute.value.fullPath.split('/')[3];
    const { data } = await getBOMDetailApi(bomId);
    productInfo.value.id = data.id;
    productInfo.value.bomName = data.bomName;
    productInfo.value.bomPrice = data.bomPrice;
    productInfo.value.boxGauge = data.boxGauge;
    productInfo.value.paperBoxType = data.paperBoxType;
    productInfo.value.packingMethod = data.packingMethod;
    productInfo.value.remark = data.remark;
    productInfo.value.currentInventory = data.currentInventory;
    showImageUrl.value = data.renderingsUrl;
    sourceFile.value.url = data.sourceFile;
    productInfo.value.sprayCoding = data.sprayCoding;
    const preparedProductsList = data.bomRelatSemiVos.map((item:any)=>{
        return {
            ...item,
            bomId: data.id
        }
    });
    preparedProducts.value = [...preparedProductsList];
    const auxiliariesList = data.auxiliaryMaterialsVos.map((item: any)=>{
        return {
            ...item,
            bomId: data.id
        }
    });
    auxiliaries.value = [...auxiliariesList];
    const laborInfo = data.laborCostVos.filter((item: any)=>item.type == 1)[0];
    laborCost.value = {...laborInfo, bomId: data.id};
    const packageInfo = data.laborCostVos.filter((item: any)=>item.type == 2)[0];
    packingCost. value = {...packageInfo, bomId: data.id};
    const totalCatagory = total_catagory.value.filter((item:any)=>item.value == data.productCategoriesType)[0];
    const subCatagory = single_catagory.value.filter((item:any)=>item.value == data.productSubcategoryType)[0];
    selectedCategory.value = {...totalCatagory};
    selectedSubCategory.value = {...subCatagory};
};

const handleClickSourceFile = (url: any)=>{
    const fileName = `源文件${getFormattedTimestamp()}`;
    const link = document.createElement('a');
    link.href = url;
    link.download = fileName; // 指定下载的文件名
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

const handleCloseViewer = ()=>{
    urlList.value = [];
    showViewer.value = false;
};

/** 计算成本 */
watch(()=>[
    preparedProducts.value,
    auxiliaries.value,
    laborCost.value,
    packingCost.value
],(newData)=>{
    const [ preparedProducts, auxiliaries, laborCost, packingCost ] = newData;
    let preparedCost = 0;
    /** 半成品成本 计算*/
    if(preparedProducts){
        // @ts-ignore
        preparedProducts.forEach((item: any)=>{
            preparedCost += item.number * item.price
        });
    };
    let auxiliaryCost = 0;
    /** 辅材成本计算 */
    if(auxiliaries){
        // @ts-ignore
        auxiliaries.forEach((item: any)=>{
            auxiliaryCost += item.number * item.price
        });
    };
    // console.log(preparedCost, auxiliaryCost, laborCost.price, packingCost.price);
    // @ts-ignore
    let totalCost = preparedCost + auxiliaryCost + (Number(laborCost.price) || 0) + (Number(packingCost.price) || 0);
    costPerBox.value = totalCost;
},{deep: true});

onMounted(()=>{
    getBOMDetail();
});

</script>

<style lang="scss" scoped>

.materials-card{
    margin-top: 20px;
}
.prepared-product-list{
    // display: flex;
    .prepared-product{
        position: relative;
    }
    .product-info-text{
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 15px;
    }
    .prepared-product-img:nth-child(n+2){
        margin-left: 50px;
        border: dashed 1px grey;
    }
    .delete{
        position: absolute;
        right: 97px;
        top: 0px;
        width: 0;
        height: 0;
        border-style:solid;
        border-color: transparent #ff0000;
        border-width: 0 50px 50px 0;
        border-radius: 10px;
        .delete-icon{
            position: absolute;
            font-size: 20px;
            color: #ffffff;
            right: -40px;
            top: 5px;
        }
        &:hover{
            cursor: pointer;
        }
    }
}

.dialog-footer{
    display: flex;
    justify-content: center;
}
    
</style>
